<template>
    <div class="classroom-info">
      <h3>基本信息</h3>
      <p>班级ID:{{ classroomId }}</p>
      <el-table :data="tableData" style="width: 100%;height: 285px;background-color: rgba(0,0,0,0.05)">
        <el-table-column prop="userId" label="成员ID"></el-table-column>
        <el-table-column prop="lessonsCompleted" label="已学课时"></el-table-column>
        <el-table-column prop="level" label="Level"></el-table-column>
        <el-table-column prop="studyDuration" label="学习时长"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import { ElTable, ElTableColumn } from 'element-plus';
  import http from '../../http/index.js'
  
  export default {
    name: 'ClassroomInfo',
    components: {
      ElTable,
      ElTableColumn
    },
    props: {
      classroomId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        tableData: []
      };
    },
    methods: {
      fetchClassroomInfo() {
        //从后端获取班级信息
        http({
          method: 'get',
          url: '/api/classroom/details',
          params: {
            classroomId: this.classroomId
          }
        }).then(res => {
          this.tableData = res;
          // console.log(this.tableData, '----------')
          // console.log(this.tableData[0]);
        })
      }
    },
    mounted() {
      this.fetchClassroomInfo(); 
    }
  };
  </script>
  
  <style scoped>
  .classroom-info {
    max-width: 800px; 
    margin: 20px auto; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    border-radius: 8px; 
    overflow: hidden; 
    background-color: #fff; 
  }
  
  .classroom-info h3 {
    background-color: #409eff;
    color: white;
    padding: 10px 20px;
    margin: 0;
    font-family: "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif; 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
    border-bottom: 3px solid #307AFF; 
  }
  
  .el-table {
    --el-table-header-background-color: #f5f7fa; 
    --el-table-row-hover-background-color: #f0f0f0; 
  }
  
  .el-table .el-table__header-wrapper {
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
  }
  
  .lesson-list-item {
    text-align: left; 
    overflow-y: scroll;
  }
  </style>
